
<template>
<el-row class="tac">
  <el-col :span="24">
    <el-menu
      style="text-align:left;"
      :uniqueOpened="true"
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleSelect"
      active-text-color="#ffd04b">
      <el-submenu index="/admin">
        <template #title>
          <!-- <i class="el-icon-location"></i> -->
          <unicon name="file"></unicon>
          <span> Articles</span>
        </template>
          <el-menu-item index="/admin/articles">
          <unicon name="copy"></unicon>
          <router-link :to="{name:'articles'}"> List</router-link></el-menu-item>
          <el-menu-item index="/admin/articleCreation">
          <unicon name="file-alt"></unicon>
          <router-link :to="{name:'articleCreation'}"> Creation</router-link></el-menu-item>
      </el-submenu>
      <el-menu-item index="/admin/tags">
        <!-- <i class="el-icon-menu"></i> -->
        <unicon name="tag-alt"></unicon>
        <template #title> <router-link :to="{name:'tags'}"> Tag</router-link></template>
      </el-menu-item>
      <el-menu-item index="/admin/categories">
        <!-- <i class="el-icon-document"></i> -->
        <unicon name="books"></unicon>
        <template #title> <router-link :to="{name:'categories'}"> Category</router-link></template>
      </el-menu-item>
      <el-menu-item index="/admin/comments">
        <!-- <i class="el-icon-document"></i> -->
        <unicon name="comment-alt-lines"></unicon>
        <template #title> <router-link :to="{name:'comments'}"> Comments</router-link></template>
      </el-menu-item>
    </el-menu>
  </el-col>
</el-row>
</template>

<script>
import { onMounted, ref } from 'vue'
  export default {
    setup(){
      const activeIndex = ref(null)
      function handleSelect(index, indexPath){
        activeIndex.value = index
      }

      onMounted(()=>{
        activeIndex.value = localStorage.getItem("currentPath")
      })

      return {handleSelect, activeIndex}
    }
  }
</script>

<style>

</style>
